<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String bathPath = request.getContextPath();
        pageContext.setAttribute("bathPath", bathPath);
    %>
    <meta charset="UTF-8">
    <title>假类设置</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${bathPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${bathPath}/css/common.css">
    <link rel="stylesheet" href="${bathPath}/css/timeSlot.css">
    <link rel="stylesheet" href="${bathPath}/css/settingHoliday.css">
</head>
<body>
<div class="layui-btn-group ml-54 demoTable radius">
    <button class="layui-btn layui-btn-normal" data-type="add">新增</button>
</div>
<table class="layui-hide" id="timeSlotTable" lay-filter="test"></table>
<!--添加弹出层-->
<div  id="addMask" style="display: none;">
    <form class="layui-form time-slot" action="#" id=runForm" lay-filter="example">
        <input type="hidden" id="id" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">假期名称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="leaveName" id="leaveName" lay-verify="required" placeholder="请输入假期名称">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">最小单位值</label>
            <div class="layui-input-inline">
                <input type="text" name="leaveValue" class="layui-input" lay-verify="required|number" placeholder="请输入最小单位值">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">最小单位</label>
            <div class="layui-input-inline">
                <select name="unit" lay-verify="required">
                    <option value=""></option>
                    <option value="1">小时</option>
                    <option value="2">分钟</option>
                    <option value="3">日</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">舍入控制</label>
            <div class="layui-input-inline">
                <select name="remaindProc">
                    <option value=""></option>
                    <option value="1">向下(舍弃)</option>
                    <option value="2">四舍五入</option>
                    <option value="3">向上(进位)</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">按次计算</label>
            <div class="layui-input-inline">
                <input type="radio" name="remaindCount" value="1" title="按次计算" checked>
                <input type="radio" name="remaindCount" value="2" title="累计后计算">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">报表中的表示符号</label>
            <div class="layui-input-inline">
                <input type="text" name="reportSymbol" class="layui-input" lay-verify="required" placeholder="请输入符号">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit class="layui-btn layui-btn-normal" lay-filter="formTest" id="confirm">确定</button>
                <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
            </div>
        </div>
    </form>
</div>


<script type="text/html" id="barDemo">
<%--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>--%>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="${bathPath}/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${bathPath}/js/common.js?123123"></script>
<script>
    var layerIndex = null;
    var ids = ['#leaveValue','#unit','#remaindProc','#remaindCount','#totalremaindProc','#reportSymbol'];
    $(function () {
        initLayUI();
    })
    function initLayUI() {
        layui.use(['form', 'laydate', 'layer', 'table'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            var layer = layui.layer;


            table.render({
                elem: '#timeSlotTable'
                , url: '${bathPath}/leaveClass/selectAll.action'
                , toolbar: true
                ,height: 'full-38'
                , title: '假类设置表'
                , cols: [[
                    {field: 'leaveName', title: '假类名称',minWidth:120}
                    , {field: 'leaveValue', title: '最小单位值',minWidth:120}
                    , {field: 'unit', title: '最小单位',minWidth:120,templet:function (data) {
                                return formatterUnit(data.unit);
                            }}
                    , {field: 'remaindProc', title: '舍入控制',minWidth:120,templet:function (data) {
                            return formatterProcType(data.remaindProc);
                        }}
                    , {field: 'remaindCount', title: '计算方式',minWidth:120,templet:function(data){
                            return formatterCalculateType(data.remaindCount);
                        }}
                    , {field: 'reportSymbol', title: '报表中的表示符号',minWidth:150}
                    ,{toolbar:'#barDemo',title:'操作',width:180}
                ]]
                , page: false
                , response: {
                    statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , id: 'testReload'
            });

            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'add') {
                    //传入add逻辑事件
                    runEvent();
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        //清除时段逻辑
                        var dataJson = {};
                        dataJson.id = data.id;
                        $.ajax({
                            type: 'POST',
                            data: dataJson,
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/leaveClass/delete.action',
                            success: function (data) {
                                if (data == 'SUCCESS') {
                                    layer.close(index);
                                    active.reload();
                                }
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    //传入编辑逻辑事件
                    runEvent(data);
                } else if (obj.event === 'cancel') {
                    layer.close(layerIndex);
                }
            });

            var $ = layui.$, active = {
                reload: function () {
                    //执行重载
                    table.reload('testReload', {
                        where: {
                        }
                        // , page: {
                        //     curr: 1
                        // }
                    });
                }
            };

            $('.cancel-layer').on('click', function () {
                layer.close(layerIndex);
            })

            $('.radius .layui-btn').on('click', function () {
                runEvent();
            });

            form.on('submit(formTest)', function (data) {
                var dataJson = data.field;
                var num = $('#confirm').data('num');
                if(num === 0){
                    $.ajax({
                        type: 'POST',
                        data: dataJson,
                        contentType:"application/x-www-form-urlencoded",
                        url: '${bathPath}/leaveClass/insert.action',
                        success: function (data) {
                            if (data == 'SUCCESS') {
                                layer.close(layerIndex);
                                active.reload();
                            }
                        }
                    })
                }else if(num === 1){
                    dataJson.id = $('#id').val();
                    $.ajax({
                        type: 'POST',
                        data: dataJson,
                        contentType:"application/x-www-form-urlencoded",
                        url: '${bathPath}/leaveClass/update.action',
                        success: function (data) {
                            if (data == 'SUCCESS') {
                                layer.close(layerIndex);
                                active.reload();
                            }
                        }
                    })
                }
                return false;
            })

            var dateSelect = function (id) {
                laydate.render({
                    elem: id
                    , type: 'time'
                    ,format:'HH:mm'
                    ,trigger: 'click'
                });
            }
            //日期时间选择器
            for(var i in ids){
                dateSelect(ids[i]);
            }
            var runEvent = function(){
                //初始化表单值
                var title = '';
                if(arguments.length > 0){
                    var data = arguments[0];
                    form.val('example',{
                        'id':data.id,
                        'leaveName':data.leaveName,
                        'leaveValue':data.leaveValue,
                        'unit':data.unit,
                        'remaindProc':data.remaindProc,
                        'remaindCount':data.remaindCount,
                        'totalremaindProc':data.totalremaindProc,
                        'reportSymbol':data.reportSymbol
                    })
                    title = '修改假类';
                    $('#confirm').data('num',1);
                }else{
                    form.val('example',{
                        'id':'',
                        'leaveName':'',
                        'leaveValue':'',
                        'unit':'',
                        'remaindProc':'',
                        'remaindCount':'',
                        'totalremaindProc':'',
                        'reportSymbol':''
                    })
                    title = '新增假类';
                    $('#confirm').data('num',0);
                }
                layerIndex = layer.open({
                    type: 1
                    ,title: title //不显示标题栏
                    ,area: '370px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                    // ,btn: ['确定', '取消']
                    // ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: $('#addMask')
                    ,success:function(layero,index){
                        console.log(layero);
                        form.render();
                    }
                    ,end:function(){
                        form.val('example',{
                            'leaveName':'',
                            'leaveValue':'',
                            'unit':'',
                            'remaindProc':'',
                            'remaindCount':'',
                            'totalremaindProc':'',
                            'reportSymbol':''
                        })
                    }
                });
            }
        });
    }

    function formatterUnit(type){
        var result = '';
        switch (type){
            case 1:
                result = '小时';
                break;
            case 2:
                result = '分钟';
                break;
            case 3:
                result = '日';
                break;
            default:
                break;
        }
        return result;
    }
</script>
</body>
</html>